<template>
  <el-drawer v-model="assignDrawer" size="65%" class="custom-drawer" :direction="direction">
    <template #header>
      <div class="flex items-center custom-header">
        <h3 class="flex items-center">
          <el-icon class="mr-1" :size="20" color="var(--el-color-primary)">
            <Setting />
          </el-icon>
          角色分配{{ tabTitle[activeTab] }}
        </h3>
        <el-button-group class="ml-4" size="small">
          <el-button :type="activeTab === 'menu' ? 'primary' : 'default'" @click="switchComponent('menu')">
            <el-icon>
              <Menu />
            </el-icon>
            菜单权限
          </el-button>
          <el-button :type="activeTab === 'data' ? 'primary' : 'default'" @click="switchComponent('data')">
            <el-icon>
              <Briefcase />
            </el-icon>
            数据权限
          </el-button>
          <!--          <el-button :type="activeTab === 'user' ? 'primary' : 'default'" @click="switchComponent('user')">-->
          <!--            <el-icon>-->
          <!--              <Avatar />-->
          <!--            </el-icon>-->
          <!--            授权用户-->
          <!--          </el-button>-->
        </el-button-group>
      </div>
    </template>
    <template #default>
      <el-descriptions :column="2" border v-if="activeTab !== 'user'">
        <el-descriptions-item label="角色名称">{{ roleMenuForm.name }}</el-descriptions-item>
        <el-descriptions-item label="角色标识">{{ roleMenuForm.roleCode }}</el-descriptions-item>
        <el-descriptions-item label="角色描述">
          {{ roleMenuForm.description || "暂无描述" }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions :title="setTabTitle()" :class="['custom-desc', activeTab !== 'user' ? 'mt-6' : '']"></el-descriptions>
      <el-divider class="desc-divider"></el-divider>
      <MenuPermission v-if="activeTab === 'menu'" ref="menuPermissionRef" :role="roleMenuForm" />
      <DataPermission v-if="activeTab === 'data'" ref="dataPermissionRef" :role="roleMenuForm"></DataPermission>
      <UserPermission v-if="activeTab === 'user'" :role="roleMenuForm"></UserPermission>
    </template>
    <template #footer v-if="activeTab !== 'user'">
      <div class="flex justify-end">
        <el-button type="default" @click="assignDrawer = false">
          <el-icon>
            <Close />
          </el-icon>
          取消
        </el-button>
        <el-button type="primary" @click="saveRolePermission">
          <el-icon>
            <Check />
          </el-icon>
          保存
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { Role } from "@/api/interface";

import { changeRoleMenu, getRoleDetail } from "@/api/modules/role";
import { useComponentRef } from "@/hooks/useComponentRef";
import { DrawerProps, ElMessage } from "element-plus";

defineOptions({
  name: "AssignPermissions"
});

const MenuPermission = defineAsyncComponent(() => import("./MenuPermission.vue"));
const DataPermission = defineAsyncComponent(() => import("./DataPermission.vue"));
const UserPermission = defineAsyncComponent(() => import("./UserPermission.vue"));
const assignDrawer = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const menuPermissionRef = useComponentRef(MenuPermission);

const roleMenuForm = ref<Role.IRole>({});

const activeTab = ref("menu");

const tabTitle = reactive({
  menu: "菜单权限",
  data: "数据权限",
  user: "用户名单"
});

const openDialog = async (row: Role.IRole) => {
  if (!row.id) return;
  await getRoleDetailById(row.id);
  assignDrawer.value = true;
};

const getRoleDetailById = async (id: number) => {
  // 获取角色详情
  const { data } = await getRoleDetail(id);
  roleMenuForm.value = data;
};

const switchComponent = (tab: string) => {
  activeTab.value = tab;
};

const saveRoleMenuPermission = async () => {
  try {
    const checkedKeys = menuPermissionRef.value?.getCheckedKeys() as number[];
    await changeRoleMenu({ id: roleMenuForm.value.id, menus: checkedKeys });
    ElMessage.success("保存成功");
  } catch (e) {
    console.log(e);
  }
};

const setTabTitle = () => {
  return ["menu", "data"].includes(activeTab.value)
    ? `授权${tabTitle[activeTab.value]}`
    : `授权${tabTitle[activeTab.value]}(${roleMenuForm.value.name}-${roleMenuForm.value.roleCode})`;
};

const saveRolePermission = () => {
  switch (activeTab.value) {
    case "menu":
      return saveRoleMenuPermission();
    case "data":
      break;
    case "user":
      break;
  }
};

defineExpose({
  openDialog
});
</script>

<style lang="scss" scoped>
.desc-divider {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
:deep(.el-descriptions__title) {
  color: var(--el-color-primary);
}
:deep(.el-descriptions__label) {
  width: 120px;
}
</style>
